<template>
  <div>
    <FormPanel :list="formList" :isSubmitBtn="false" :collapse="false" :labelWidth="120" @formChange="changeHandle" />

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9999,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button @click="saveQuestion">确 定</el-button>
      <el-button @click="closeQuestionModify">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { queryAnswersPagByIds } from '@/api/customerRepair/visitRules/questionnaireMake2';

export default {
  name: 'questionnaireModify',
  props: ['selColumn'],
  data() {
    return {
      formList: this.createFormList()
    };
  },
  mounted() {
    this.initForm();
    this.queryQuestionList();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '问卷内容',
          fieldName: 'QUESTION_CONTENT'
        },
        {
          type: 'INPUT',
          label: '答案',
          fieldName: 'answer',
          hidden: true
        },
        {
          type: 'SELECT',
          label: '答案',
          fieldName: 'dynamicRadioSelect',
          itemList: [],
          hidden: true
        },
        {
          type: 'MULTIPLE_SELECT',
          label: '答案',
          fieldName: 'dynamicMultipleSelect',
          itemList: [],
          hidden: true
        },
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'remark'
        }
      ];
    },

    // 获取问题选项
    async queryQuestionList() {
      console.log('查看问题id选项',this.selColumn);
      let questionId = this.selColumn.questionId;
      let obj = {
        questionId: questionId
      };
      const res = await queryAnswersPagByIds(obj);
      // console.log(res,'res')
      let List = res.data.map(x => ({ text: x.answer, value: x.answer }));
      this.formList.find(x => x.fieldName === 'dynamicRadioSelect').itemList = List;
      this.formList.find(x => x.fieldName === 'dynamicMultipleSelect').itemList = List;
    },

    // 数据代入
    initForm() {
      console.log(this.selColumn, 'selct');
      let content = this.selColumn.questionContent;
      let answer = this.selColumn.answer;
      let remark = this.selColumn.remark;
      let type = this.selColumn.questionType;
      this.formList.find(x => x.fieldName === 'QUESTION_CONTENT').initialValue = content;
      this.formList.find(x => x.fieldName === 'remark').initialValue = remark;
      if (type == 80741001) {
        // this.formList.find( x => x.fieldName === 'answer').initialValue = answer;
        this.formList.find(x => x.fieldName === 'answer').hidden = false;
      } else if (type == 80741002) {
        // this.formList.find( x => x.fieldName === 'dynamicRadioSelect').initialValue = answer;
        this.formList.find(x => x.fieldName === 'dynamicRadioSelect').hidden = false;
      } else if (type == 80741003) {
        // this.formList.find( x => x.fieldName === 'dynamicMultipleSelect').initialValue = answer;
        this.formList.find(x => x.fieldName === 'dynamicMultipleSelect').hidden = false;
      }
    },

    saveQuestion() {
      if (this.selColumn.questionType == 80741003) {
        this.formList.find(x => x.fieldName === 'dynamicMultipleSelect').initialValue.map(x => (x += ','));
      }
      // console.log(this.formList);
      this.$emit('saveQuestions', this.formList);
    },

    closeQuestionModify() {
      this.$emit('closeQuestionModify', false);
    },

    changeHandle() {},

    collapseHandle() {}
  }
};
</script>

<style lang="less" scoped></style>
